<!DOCTYPE html>
<html>
<head>
  <!-- vuetify -->
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>MyPetstoreForMerchant</title>
</head>
<body>
<div id="app">
  <template>
    <v-app>
      <!-- 导航栏 -->
      <v-app-bar app color="primary" dark>
        <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
        <v-toolbar-title>商家管理系统</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-bell</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-account</v-icon>
        </v-btn>
      </v-app-bar>

      <!-- 侧边栏 -->
      <v-navigation-drawer v-model="sideDrawer" app>
        <v-sheet color="grey lighten-4" class="pa-4">
          <v-avatar class="mb-4" color="grey darken-1" size="64">
            <img src="../images/cutecat.jpg" alt="icon">
          </v-avatar>
          <div>lapu2023@outlook.com</div>
        </v-sheet>
        <v-divider></v-divider>
        <v-list>
          <v-list-item
                  v-for="item in sideDrawerlinks"
                  :key="item.icon"
                  link
                  :href="item.url"
          >
            <a :href="item.url" style="text-decoration: none; color: inherit; width: 100%; display: flex;">
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.text }}</v-list-item-title>
              </v-list-item-content>
            </a>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-cog</v-icon>
            </v-list-item-icon>
            <v-list-item-content @click="settingDialog = true">
              <v-list-item-title >设置</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      <!-- 订单栏 -->

      <!-- 主体内容 -->
      <v-main>
        <v-card
                color="grey lighten-4"
                flat
                height="50px"
                tile
        >
          <v-toolbar dense>

            <v-toolbar-title>
              <v-icon>mdi-cart-minus</v-icon>
              订单管理</v-toolbar-title>

            <v-spacer></v-spacer>
            <v-btn
                    rounded
                    color="primary"
                    dark
                    @click="batchShipOrders"
            >
              一键发货
            </v-btn>
            <v-btn  icon
              @click="deleteItem"
            >
              <v-icon color="red darken-3">mdi-delete</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
        <!--订单组  -->

        <template>
          <v-card
                  class="mx-auto"
                  style="margin-bottom: 30px;"
          >
            <v-list two-line>
              <v-list-item-group
                      active-class="green--text"
                      v-model="selected"
                      multiple
              >
                <template v-for="(item, index) in  orderItems">


                  <v-list-item :key="item.title">
                    <template v-slot:default="{ active }">
                      <v-list-item-action >
                        <v-btn @click="editItem(item)"
                               @click.stop="handleButtonClick(item)"
                               color="primary"

                        >详情</v-btn>
                      </v-list-item-action>
                      <v-list-item-content>

                        <v-list-item-title>{{ '订单编号：' + item.orderid }}</v-list-item-title>
                        <v-list-item-subtitle
                                class="text--primary"
                                v-text="item.headline"
                        ></v-list-item-subtitle>

                        <v-list-item-subtitle>{{ '用户名：' + item.userid }}</v-list-item-subtitle>
                        <v-list-item-subtitle>{{ '时间：' + item.orderdate }}</v-list-item-subtitle>
                      </v-list-item-content>

                      <v-list-item-action>

                        <v-list-item-action-text>{{ '$' + item.totalprice }}</v-list-item-action-text>

                        <v-icon
                                v-if="!active"
                                color="grey lighten-1"
                        >
                          mdi-circle
                        </v-icon>

                        <v-icon
                                v-else
                                color="green darken-3"
                        >
                          mdi-check-circle
                        </v-icon>
                      </v-list-item-action>
                    </template>
                  </v-list-item>



                  <v-divider
                          v-if="index <  orderItems.length - 1"
                          :key="index"
                  ></v-divider>
                </template>
              </v-list-item-group>
            </v-list>
          </v-card>
        </template>
        <!-- 详情对话框 -->
        <v-dialog
                v-model="detailDialog"
                persistent
                max-width="600px"
        >
          <v-card>
            <v-card-title>
              <span class="text-h5">详情</span>
            </v-card-title>
            <!-- 编辑卡片 -->
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.orderid"
                            label="Orderid"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.userid"
                            label="Userid"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.orderdate"
                            label="Orderdate"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.shipaddr1"
                            label="shipaddr1"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.shipaddr2"
                            label="shipaddr2"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.shipcity"
                            label="shipcity"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.shipstate"
                            label="shipstate"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.shipzip"
                            label="shipzip"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.shipcountry"
                            label="shipcountry"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.billaddr1"
                            label="billaddr1"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.billaddr2"
                            label="billaddr2"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.billcity"
                            label="billcity"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.billstate"
                            label="billstate"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.billzip"
                            label="billzip"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.billcountry"
                            label="billcountry"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.courier"
                            label="courier"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem. totalprice"
                            label=" totalprice"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem. billtofirstname"
                            label=" billtofirstname"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.billtolastname"
                            label="billtolastname"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="3"
                  >
                    <v-text-field
                            v-model="editedItem.shiptofirstname"
                            label="shiptofirstname"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="2"
                  >
                    <v-text-field
                            v-model="editedItem.shiptolastname"
                            label="shiptolastname"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.creditcard"
                            label="creditcard"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.exprdate"
                            label="exprdate"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.cardtype"
                            label="cardtype"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.locale"
                            label="locale"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                      color="blue darken-1"
                      text
                      @click="close"
              >
                Cancel
              </v-btn>
              <v-btn
                      color="blue darken-1"
                      text
                      @click="save"
              >
                Save
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <!--删除对话框-->
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
              <v-btn color="red darken-1" text @click="deleteItemConfirm">OK</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-snackbar
                v-model="snackbar"
        >
          {{ text }}

          <template v-slot:action="{ attrs }">
            <v-btn
                    color="pink"
                    text
                    v-bind="attrs"
                    @click="snackbar = false"
            >
              Close
            </v-btn>
          </template>
        </v-snackbar>
      </v-main>

      <!-- 设置栏目 -->
      <v-row justify="center">
        <v-dialog
                v-model="settingDialog"
                fullscreen
                hide-overlay
                transition="dialog-bottom-transition"
        >
          <v-card>
            <v-toolbar
                    dark
                    color="primary"
            >
              <v-btn
                      icon
                      dark
                      @click="settingDialog = false"
              >
                <v-icon>mdi-close</v-icon>
              </v-btn>
              <v-toolbar-title>Settings</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-toolbar-items>
                <v-btn
                        dark
                        text
                        @click="settingDialog = false"
                >
                  Save
                </v-btn>
              </v-toolbar-items>
            </v-toolbar>
            <v-list
                    three-line
                    subheader
            >
              <v-subheader>User Controls</v-subheader>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Content filtering</v-list-item-title>
                  <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Password</v-list-item-title>
                  <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
            <v-divider></v-divider>
            <v-list
                    three-line
                    subheader
            >
              <v-subheader>General</v-subheader>
              <v-list-item>
                <v-list-item-action>
                  <v-checkbox v-model="notifications"></v-checkbox>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>Notifications</v-list-item-title>
                  <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-action>
                  <v-checkbox v-model="sound"></v-checkbox>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>Sound</v-list-item-title>
                  <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-action>
                  <v-checkbox v-model="widgets"></v-checkbox>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>Auto-add widgets</v-list-item-title>
                  <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>
        </v-dialog>
      </v-row>
      <!-- 页脚 -->
      <v-footer padless>
        <v-col class="text-center" cols="12">
          {{ new Date().getFullYear() }} — <strong>MyPetstoreForMerchant</strong>
        </v-col>
      </v-footer>
    </v-app>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/orderManagement.js"></script>
</body>
</html>